<template>
    <div>
        <h3>显示</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>门店创建时间</td>
                    <td>门店状态</td>
                    <td>门店特色</td>
                    <td>门店介绍</td>
                    <td>门店位置</td>
                    <td>酒店类型</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.BranchName }}</td>
                    <td><img :src="item.Photo" alt="" width="100" height="100"/></td>
                    <td>{{ item.BeginTime.substring(0,10) }}</td>
                    <td>{{ item.State==1?"禁用":"启用" }}</td>
                    <td>{{ item.Feature}}</td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.Name }}</td>
                    <td>
                        <span v-if="item.ShopType==1">普通酒店</span>
                        <span v-if="item.ShopType==2">三星酒店</span>
                        <span v-if="item.ShopType==3">五星酒店</span>
                        <span v-if="item.ShopType==4">电竞酒店</span>
                        <span v-if="item.ShopType==5">商务酒店</span>
                        <span v-if="item.ShopType==6">民宿酒店</span>
                    </td>
                    <td>
                        <input type="button" value="修改" class="btn btn-success"/>
                        <input type="button" value="启用" class="btn btn-info"/>
                        <input type="button" value="禁用" class="btn btn-danger"/>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.topage }}页</span>
            <span>共{{ data.tocount }}条</span>
            <span>当前{{ queryinfo.pageindex }}页</span>
            <input type="button" value="首页" @click="fanye(1)"/>
            <input type="button" value="上一页" @click="fanye(queryinfo.pageindex-1)"/>
            <input type="button" value="下一页"  @click="fanye(queryinfo.pageindex+1)"/>
            <input type="button" value="尾页" @click="fanye(data.topage)"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted}from 'vue';
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute}from 'vue-router'
const router=useRouter();
const route=useRoute();
let queryinfo:any=reactive({
    pageindex:1,
    pagesize:2,
    shopname:'',
    begintime:'',
})

let data:any=reactive({
    list:[],
    tocount:0,
    topage:0,
})


onMounted(()=>{
    getlist();
})


const show=()=>{
    queryinfo.pageindex=1;
    getlist();
}

const fanye=(num:any)=>{
    if(num<1){
        queryinfo.pageindex=1;
        return;
    }
    if(num>data.topage){
        queryinfo.pageindex=data.topage;
        return;
    }
    queryinfo.pageindex=num;
    getlist();
}

const getlist=()=>{
    axios({
        url:'/api/Shop/Getshop',
        method:'get',
        params:queryinfo
    })
    .then(res=>{
        console.log(res);
        data.list=res.data.c,
        data.tocount=res.data.tocount,
        data.topage=res.data.topage
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>
span{
    margin-left: 10px;
}
input[type="button"]{
    margin-left: 10px;
}
</style>